import React, { memo, useCallback, useMemo, useRef, useState } from "react"

const HelloWorld = memo(function (props) {
    console.log("HelloWorld被渲染~")
    return <h2>Hello World</h2>
})

function calcNumTotal(num) {
    console.log("calcNumTotal的计算过程被调用~")
    let total = 0
    for (let i = 0; i < num; i++) {
        total += i
    }
    return total
}

const App = memo(() => {
    const [count, setCount] = useState(0)

    // const result = calcNumTotal(50)

    // 1.不依赖任何的值，进行计算
    const result = useMemo(() => {
        return calcNumTotal(50)
    }, [])

    // 2.依赖count
    // const result = useMemo(() => {
    // return calcNumTotal(50)
    // }, [count])

    // 3.useMemo 和 useCallback的对比
    // function fn() {}
    // const increment = useCallback(fn, [])
    // const increment2 = useMemo(() => fn, [])

    // 4.使用useMemo对子组件渲染进行优化
    // const info = { name: "why", age: 18 }
    const info = useMemo(() => ({ name: "why", age: 18 }), [])

    const countRef = useRef()
    countRef.current = count

    const addNumber = useCallback((e) => setCount(countRef.current + 1), [])
    // const addNumber = useCallback((e) => setCount(count + 1), [count])

    console.log("App render")

    return (
        <div>
            <h2>计算结果：{result}</h2>
            <h2>计数器：{count}</h2>
            <button onClick={addNumber}>+1</button>

            {/* <HelloWorld result={result} info={info} addNumber={addNumber} /> */}
        </div>
    )
})

export default App
